<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>OpenApi</title>
    <!--<link href="../../../../Public/css/bootstrap-theme.css" rel="stylesheet" />
    <link href="../../../../Public/css/bootstrap.min.css" rel="stylesheet" />-->
    <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet" />
    <link href="__PUBLIC__/css/bootstrap-theme.min.css" rel="stylesheet" />
    <style>
        html {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: 'Microsoft Yahei', '微软雅黑', '宋体', \5b8b\4f53, Tahoma, Arial, Helvetica, STHeiti;
            margin: 0;
        }

        .main-nav {
            margin-left: 1px;
        }

        .main-nav.nav-tabs.nav-stacked> li {}

        .main-nav.nav-tabs.nav-stacked> li> a {
            padding: 10px 8px;
            font-size: 12px;
            font-weight: 600;
            color: #4A515B;
            background: #E9E9E9;
            background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FAFAFA), color-stop(100%, #E9E9E9));
            background: -webkit-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -o-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -ms-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
            border: 1px solid #D5D5D5;
            border-radius: 4px;
        }

        .main-nav.nav-tabs.nav-stacked> li> a> span {
            color: #4A515B;
        }

        .main-nav.nav-tabs.nav-stacked> li.active> a,
        #main-nav.nav-tabs.nav-stacked> li> a:hover {
            color: #FFF;
            background: #3C4049;
            background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4A515B), color-stop(100%, #3C4049));
            background: -webkit-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -o-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -ms-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: linear-gradient(top, #4A515B 0%, #3C4049 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
            border-color: #2B2E33;
        }

        #main-nav.nav-tabs.nav-stacked> li.active> a,
        #main-nav.nav-tabs.nav-stacked> li> a:hover> span {
            color: #FFF;
        }

        .main-nav.nav-tabs.nav-stacked> li {
            margin-bottom: 4px;
        }

        .nav-header.collapsed> span.glyphicon-chevron-toggle:before {
            content: "\e114";
        }

        .nav-header> span.glyphicon-chevron-toggle:before {
            content: "\e113";
        }

        footer.duomi-page-footer {
            background-color: white;
        }

        footer.duomi-page-footer .beta-message {
            color: #a4a4a4;
        }

        footer.duomi-page-footer .beta-message a {
            color: #53a2e4;
        }

        footer.duomi-page-footer .list-inline a,
        footer.authenticated-footer .list-inline li {
            color: #a4a4a4;
            padding-bottom: 30px;
        }

        footer.duomi-page-footer {
            background-color: white;
        }

        footer.duomi-page-footer .beta-message {
            color: #a4a4a4;
        }

        footer.duomi-page-footer .beta-message a {
            color: #53a2e4;
        }

        footer.duomi-page-footer .list-inline a,
        footer.authenticated-footer .list-inline li {
            color: #a4a4a4;
            padding-bottom: 30px;
        }
        /*********************************************自定义部分*********************************************/

        .secondmenu a {
            font-size: 12px;
            color: #4A515B;
            text-align: center;
            border-radius: 4px;
        }

        .secondmenu> li> a:hover {
            background-color: #6f7782;
            border-color: #428bca;
            color: #fff;
        }

        .secondmenu li.active {
            background-color: #6f7782;
            border-color: #428bca;
            border-radius: 4px;
        }

        .secondmenu li.active> a {
            color: #ffffff;
        }

        .navbar-static-top {
            background-color: #212121;
            margin-bottom: 5px;
        }

        .navbar-brand {
            background: url('http://static-res.ruyo.net/ruyo_net_w_32.png') no-repeat 10px 8px;
            display: inline-block;
            vertical-align: middle;
            padding-left: 50px;
            color: #fff;
        }

        .navbar-brand:hover {
            color: #fff;
        }

        .collapse.glyphicon-chevron-toggle,
        .glyphicon-chevron-toggle:before {
            content: "\e113";
        }

        .collapsed.glyphicon-chevron-toggle:before {
            content: "\e114";
        }
    </style>
</head>

<body>
<div class="navbar navbar-duomi navbar-static-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#" id="logo">欧拉网开发api
            </a>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <ul id="main-nav" class="main-nav nav nav-tabs nav-stacked " style="position: fixed;width: 250px;">
                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-th-large"></i> 首页
                    </a>
                </li>
                <li>
                    <a href="#userapi" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i> 用户管理api

                        <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
                    </a>
                    <ul id="userapi" class="nav nav-list secondmenu collapse" style="height: 0px;">
                        <!--<li>
                            <a href="#register"><i class="glyphicon glyphicon-user"></i>&nbsp;注册</a>
                        </li>-->
                    </ul>
                </li>
            </ul>
        </div>
        <style>
            .small-title-api {
                font-weight: 100;
                font-size: 23px;
            }

            .api {
                line-height: 50px;
            }

            .content-api {
                font-size: 17px;
            }

            .table-title-api {
                background: rgb(0, 136, 204);
                color: white;
            }

            .return-api {
                font-size: 17px;
            }
        </style>
        <div id="api-content" class="col-md-10">
            <!--<section id="register" class="api" style="width: 80%;margin: 0px auto;">
                <h1 style="text-align: center;">用户注册</h1>
                <span class="small-title-api">简要说明:</span>
                <ul class="content-api">
                    <li>用户注册</li>
                </ul>
                <span class="small-title-api">请求URL:</span>
                <ul class="content-api">
                    <li>http://xx.com/api/user/register</li>
                </ul>
                <span class="small-title-api">请求方式:</span>
                <ul class="content-api">
                    <li>POST</li>
                </ul>
                <span class="small-title-api">参数:</span>
                <table class="table table-bordered">
                    <thead class="table-title-api">
                        <tr>
                            <th>参数名称</th>
                            <th>参数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Table cell</td>
                            <td>Table cell</td>
                        </tr>
                        <tr>
                            <td>Table cell</td>
                            <td>Table cell</td>
                        </tr>
                    </tbody>
                </table>
                <span class="small-title-api">返回:</span>
                <br/>
                <code class="return-api">
                    {
                        "error_code": 0,
                        "data": {
                            "uid": "1",
                            "username": "12154545",
                            "name": "吴系挂",
                            "groupid": 2,
                            "reg_time": "1436864169",
                            "last_login_time": "0",
                        }
                    }
                </code>
            </section>-->
        </div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
<script>
    //		var json_object = [{
    //			"register": {
    //				"title": "用户注册",
    //				"url": "http://xx.com/api/user/register",
    //				"method": "post",
    //				"para": {
    //					"username": "xxx",
    //					"password": "xxx"
    //				},
    //				"return": {
    //					"error_code": 0,
    //					"data": {
    //						"uid": "1",
    //						"username": "12154545",
    //						"name": "吴系挂",
    //						"groupid": 2,
    //						"reg_time": "1436864169",
    //						"last_login_time": "0",
    //					}
    //				},
    //				"description": "xxx"
    //			}
    //		}, {
    //			"register1": {
    //				"title": "用户注册",
    //				"url": "http://xx.com/api/user/register",
    //				"method": "post",
    //				"para": {
    //					"username1": "xxx",
    //					"password": "xxx"
    //				},
    //				"return": {
    //					"error_code": 0,
    //					"data": {
    //						"uid": "1",
    //						"username": "12154545",
    //						"name": "吴系挂",
    //						"groupid": 2,
    //						"reg_time": "1436864169",
    //						"last_login_time": "0",
    //					}
    //				},
    //				"description": "xxx"
    //			}
    //		}];
    $(function() {
        var json_object = {$api};
        for(var key in json_object) {
            var node = json_object[key];

            for(var name in node)
                var list = '<li><a href="#'+name+'"><i class="glyphicon glyphicon-user"></i>&nbsp;' + node[name].title + '</a></li>'
            $("#userapi").append(list);
            var ret = JSON.stringify(node[name].return);
            var dom = '<section id="' + name + '" class="api" style="width: 80%;margin: 0px auto;"> \
						<h1 style="text-align: center;">' + name + '</h1> \
						<span class="small-title-api">简要说明:</span> \
						<ul class="content-api"> \
							<li>' + node[name].title + '</li> \
						</ul> \
						<span class="small-title-api">请求URL:</span> \
						<ul class="content-api"> \
							<li>' + node[name].url + '</li> \
						</ul> \
						<span class="small-title-api">请求方式:</span> \
						<ul class="content-api"> \
							<li>' + node[name].method + '</li> \
						</ul> \
						<span class="small-title-api">参数:</span> \
						<table class="table table-bordered"> \
							<thead class="table-title-api"> \
								<tr> \
								<th>参数名称</th> \
									<th>参数</th> \
								</tr> \
							</thead> \
							<tbody class="api-table"> \
							</tbody> \
						</table> \
						<span class="small-title-api">返回:</span> \
						<br/> \
						<code class="return-api"> \
							'+ret+' \
						</code> \
						<p class="small-title-api">描述:</p> \
						<ul class="content-api"> \
							<li>' + node[name].description + '</li> \
						</ul> \
					</section>';
            $("#api-content").append(dom);
            for(var key in node[name]["para"]){
                var table1 = '<tr><td>'+key+'</td><td>'+node[name]["para"][key]+'</td></tr>';
                $($(".api-table").get($(".api-table").length-1)).append(table1);
            }
        }

    });
</script>

</html>